<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }

        body {
            background: url('img/bg.jpg')
        }


        .box {
            width: 1100px;
            height: 430px;
            margin: 120px auto;
        }

        .box ul li {
            list-style-type: none;
            width: 100px;
            height: 429px;
            float: left;
        }

        .box .l1 {
            background: url('./img/1.png')
        }

        .box .l2 {
            background: url('./img/2.png')
        }

        .box .l3 {
            background: url('./img/3.jpg')
        }

        .box .l4 {
            background: url('./img/4.jpg');
            width: 789px;
        }

        .box .txt {
            width: 100px;
            height: 429px;
            background: rgba(4, 2, 6, 0.4);
            cursor: pointer;
        }

        .box .txt p {
            color: #fff;
            font-family: "微软雅黑";
            float: left;
        }

        .box .txt p.p1 {
            font-size: 12px;
            width: 12px;
            margin: 45px 20px 0 20px;
        }

        .box .txt p.p2 {
            font-size: 14px;
            width: 14px;
            margin-top: 120px;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul>
            <li class="l1">
                <div class="txt">
                    <p class="p1">作者 ：小猪</p>
                    <p class="p2">拉萨之旅</p>
                </div>
            </li>
            <li class="l2">
                <div class="txt">
                    <p class="p1">作者 ：小猪</p>
                    <p class="p2">荒漠之旅</p>
                </div>
            </li>
            <li class="l3">
                <div class="txt">
                    <p class="p1">作者 ：小猪</p>
                    <p class="p2">山谷之旅</p>
                </div>
            </li>
            <li class="l4">
                <div class="txt">
                    <p class="p1">作者 ：小猪</p>
                    <p class="p2">冰山之旅</p>
                </div>
            </li>
        </ul>
    </div> 

    <!--引入jquery库-->
    <script type="text/javascript" src="jquery-1.11.3.min.js"></script>
    <script type="text/javascript">
        $(".box ul li").click(function () {
            $(this).stop(true).animate({
                width: "789px"
            }, 1000).siblings().stop(true).animate({
                width: "100px"
            }, 1000);
        });
    </script>
</body>
</html>